<template>
  <div class="app-container">
    <el-card>
      <!-- 头部 -->
      <el-row>
        <el-form ref="searchData">
          <el-col :span="8">
            <el-form-item label="目录名称">
              <el-input
                v-model.trim="searchData.directoryName"
                size="small"
                style="width: 200px"
              /></el-form-item></el-col>
          <el-col :span="10">
            <el-form-item label="状态">
              <el-select
                v-model="searchData.state"
                size="small"
                placeholder="请选择"
              >
                <el-option label="禁用" value="0" />
                <el-option label="启用" value="1" />
              </el-select>
              <el-button
                style="margin-left: 10px"
                size="small"
                @click="clearData"
              >清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchBtn"
              >搜索</el-button>
            </el-form-item></el-col>
        </el-form>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-link
              v-if="$route.params.fromPath==='subject'"
              href="#/subject"
              icon="el-icon-arrow-left"
              style="margin-right:10px"
            >返回学科</el-link>
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="adddirectorys"
            >新增目录</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert
        :title="'数据一共 ' + page.total + ' 条'"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 20px"
      />
      <!-- 表格 -->
      <el-table
        :header-cell-style="{
          background: '#fafafa',
          borderBottom: '3px solid #ebeef5',
        }"
        :data="list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="subjectName" label="所属学科" />
        <el-table-column prop="directoryName" label="目录名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" :formatter="formatterTime" />
        <el-table-column prop="totals" label="面试题数量" />
        <el-table-column prop="state" label="状态" :formatter="formatterState" />
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot="scope">
            <el-button
              type="text"
              size="small"
              @click="isFlag(scope.row)"
            >{{ scope.row.state===0?'禁用':'启用' }}</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state===0"
              @click="editdirectorys(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state===0"
              @click="deldirectorys(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          :page-sizes="[5, 10, 20, 50]"
          background
          layout="sizes,prev,pager,next,jumper"
          :page-size="page.pagesize"
          :current-page="page.page"
          :total="page.total"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
      <!-- 弹框 -->
      <el-dialog
        width="30%"
        :title="title"
        :visible="dialogFormVisible"
        @close="cancelBtn"
      >
        <el-form ref="formData" :model="formData" :rules="rules">
          <el-form-item prop="subjectName" label="所属学科" label-width="80px">
            <el-select
              v-model="formData.subjectName"
              placeholder="请选择"
              @change="selectSub"
              @focus="getSubjectListSimple"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="directoryName"
            label="目录名称"
            label-width="80px"
          >
            <el-input v-model="formData.directoryName" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancelBtn">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="subBtn"
          >确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getSubjectListSimple,
  getDirecList,
  addDirectorys,
  delDirectorys,
  editDirectorys,
  editDirectoryState,
  getDirectoryDetail,
  getSubjectDetail
} from '@/api/subject'
import { formateTime } from '@/filter/formateTime'
export default {
  data() {
    return {
      subjectList: {
        value: '',
        directoryName: '',
        subjectID: ''
      },
      list: [],
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      formData: {
        subjectName: '',
        directoryName: '',
        creator: '',
        addDate: '',
        totals: '',
        state: ''
      },
      dialogFormVisible: false,
      rules: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      searchData: {
        state: '',
        directoryName: ''
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改目录' : '新增目录'
    }
  },
  created() {
    this.getDirecList(this.page)
  },
  methods: {
    // 获取学科简单列表
    async getSubjectListSimple() {
      const res = await getSubjectListSimple()
      this.subjectList = res
    },

    // 获得目录列表
    async getDirecList(data) {
      const res = await getDirecList(data)
      this.list = res.items
      this.page.total = res.counts
    },
    // 切换分页
    async changePage(val) {
      this.page.page = val
      await this.getDirecList(this.page)
    },
    async sizeChange(val) {
      this.page.pagesize = val
      await this.getDirecList(this.page)
    },
    // 新增目录
    adddirectorys() {
      this.dialogFormVisible = true
    },
    // 确定按钮 提交表单
    async subBtn() {
      await this.$refs.formData.validate()
      try {
        if (this.formData.id) {
          await editDirectorys(this.formData)
        } else {
          await addDirectorys(this.formData)
        }
        this.getDirecList(this.page)
        this.$message.success('操作成功')
        this.dialogFormVisible = false
      } catch (err) {
        this.$message.error(err, '操作失败')
      }
    },
    // 取消按钮
    cancelBtn() {
      this.$refs.formData.resetFields()
      this.formData = {
        value: '',
        directoryName: '',
        subjectID: ''
      }
      this.dialogFormVisible = false
    },
    // 删除按钮 删除目录
    async deldirectorys(id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?')
        await delDirectorys(id)
        this.isLastItem()
        this.getDirecList(this.page)
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error(err, '删除失败')
      }
    },
    // 检验删除后是否为最后一项数据
    isLastItem() {
      // 删除一项后的真实页面数
      const totalPage = Math.ceil((this.page.total - 1) / this.page.pagesize)
      // 判断当前页面数和真实页面数的大小
      const total = this.page.page > totalPage ? totalPage : this.page.page
      // 判断是否为第一页
      this.page.page = total < 1 ? 1 : total
    },
    // 修改按钮 修改目录
    async editdirectorys(id) {
      this.formData = await getDirectoryDetail(id)
      const res = await getSubjectDetail(this.formData.subjectID)
      this.formData.subjectName = res.subjectName
      this.dialogFormVisible = true
    },
    // 搜索按钮
    searchBtn() {
      if (this.searchData.state === '' && this.searchData.directoryName === '') {
        return this.$message.warning('搜索不能为空')
      }
      this.getDirecList({ ...this.page, ...this.searchData })
    },
    // 清除按钮 清除输入框内容
    clearData() {
      this.searchData = {
        state: '',
        directoryName: ''
      }
      this.getDirecList(this.page)
    },
    // 弹框下拉选框 选中时
    selectSub(val) {
      this.formData.subjectID = val
    },

    // 禁用按钮 切换状态
    async isFlag(data) {
      data.state = data.state === 0 ? 1 : 0
      const form = {
        id: data.id,
        state: data.state
      }
      console.log(form)
      await editDirectoryState(form)
      this.$message.success('操作成功')
    },
    // 格式化时间
    formatterTime(row, column, cellValue, index) {
      return formateTime(cellValue)
    },
    // 格式化状态
    formatterState(row, column, cellValue, index) {
      return cellValue === 0 ? '已禁用' : '已启用'
    }
  }
}
</script>

<style lang="scss">
// 对话框样式

.el-dialog__wrapper {
  .el-dialog {
    overflow: hidden;
    border-radius: 10px;
    .el-dialog__header {
      background: #409eff;
      .el-dialog__title {
        color: white;
      }
      .el-icon-close::before {
        color: white;
      }
    }
  }
}
</style>
